<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title></title>

        <link href="/assets/images/favicon.ico" rel="icon">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
        <link rel="stylesheet" href="/assets/module/admin.css?v=318" />
        <link rel="stylesheet" href="/viewer/viewer.min.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
        <script type="text/javascript" src="/assets/js/common.js?v=318"></script>
        <script type="text/javascript">
            var url = window.location.pathname.substring(1);
            var item = url.split("/");
            var C = item[0];
            var A = item[1];
            var cUrl = "/" + C;
        </script>
        <script type="text/javascript" src="/viewer/viewer.min.js"></script>
        <style>
            .model-form-footer {
                margin-top: 10px;
                text-align: center;
            }

            #imageContainer {
                margin: 0;
                display: flex;
                flex-wrap: wrap; /* 允许换行 */
            }

            /* 设置图片的大小 */
            .image-preview {
                width: 100px; /* 设置图片宽度 */
                height: 100px; /* 高度自动调整，保持图片比例 */
                margin: 5px; /* 设置图片之间的间距 */
                border: 1px solid rgba(66, 66, 66, 0.5); /* 添加黑色边框 */
                border-radius: 10px; /* 设置圆角半径 */
            }

            .image-view{
                margin: 0;
            }

            .file-view {
                max-width: 300px;
                margin-bottom: 5px;
            }

            .file-box {
                display: block;
                border: 1px solid #ddd; /* 边框 */
                padding: 10px;
                text-align: left;
                color: #333;
                text-decoration: none; /* 去掉链接下划线 */
                border-radius: 4px; /* 圆角 */
                transition: background-color 0.3s ease; /* 鼠标悬停效果 */
            }

            .file-box:hover {
                background-color: #f5f5f5; /* 鼠标悬停背景色 */
            }

            .file-name {
                word-break: break-all; /* 文件名过长时自动换行 */
            }
        </style>
    </head>
</header>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form  model-form" action="/log/save" method="post">

                <input type="hidden" name="id" th:value="${log.id}" required>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户 ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="userId" required lay-verify="required" placeholder="不可已修改" th:value="${log.userId}" readonly
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">用户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="projectId" required lay-verify="required" placeholder="不可修改"  autocomplete="off" class="layui-input"
                               th:value="${log.name}" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">班级名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="projectId" required lay-verify="required" placeholder="不可修改"  autocomplete="off" class="layui-input"
                               th:value="${log.className}" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">项目名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="projectId" required lay-verify="required" placeholder="不可修改"  autocomplete="off" class="layui-input"
                               th:value="${log.projectName}" readonly>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">日志内容</label>
                    <div class="layui-input-block">
                        <textarea name="content" required lay-verify="required" placeholder="不可输入"  class = "layui-textarea" th:text="${log.content}" readonly > </textarea>
                    </div>
                </div>
                <!-- 文件内容（不可编辑） -->
                <div class="layui-form-item">
                    <label class="layui-form-label">上传图片</label>
                    <!-- 遍历展示图片 -->
                    <div id="imageContainer">
                        <div class="layui-input-block image-view" th:each="imageName : ${log.imgUrls}">
                            <img height="50%" width="50%" th:src="${imageName}" class="image-preview" alt="图片">
                        </div>
                    </div>

                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上传文件</label>
                    <div class="layui-input-block file-view" th:each="fileName : ${log.fileUrls}">
                        <a th:href="${fileName}" class="file-box" >
                            <div class="file-name" th:data-filename="${fileName}"></div>
                        </a>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分数</label>
                    <div class="layui-input-block">
                        <input type="number" name="score" required lay-verify="required|scoreRange" placeholder="请输入分数 (0-100)"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">评语</label>
                    <div class="layui-input-block">
                        <textarea name="advice" placeholder="请输入评语" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item text-center model-form-footer">
                    <!--                    <div class="layui-input-block">-->
                    <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                    <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
                    <!--                    </div>-->
                </div>
            </form>

            <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>

            <script>
                $(function () {
                    layui.use(['form', 'layer'], function () {
                        var layer = layui.layer;
                        var form = layui.form;
                        // 自定义验证规则
                        form.verify({
                            scoreRange: function (value) {
                                if (value < 0 || value > 100) {
                                    return '分数必须在 0 到 100 之间，请重新输入！';
                                }
                            }
                        });

                        function showLarge(src) {
                            // 创建容器
                            const imgContainer = document.createElement('div');
                            imgContainer.innerHTML = `<img src="${src}" alt="图片" style="max-width: 90vw; max-height: 90vh; object-fit: contain;">`;
                            document.body.appendChild(imgContainer);

                            // 创建 Viewer 实例
                            const viewer = new Viewer(imgContainer, {
                                inline: false,
                                toolbar: {
                                    zoomIn: true,
                                    zoomOut: true,
                                    oneToOne: true,
                                    reset: true,
                                    rotateLeft: true,
                                    rotateRight: true,
                                    flipHorizontal: true,
                                    flipVertical: true
                                },
                                initialViewIndex: 0, // 默认显示第一张图片
                                zoomRatio: 0.5, // 调整缩放速度
                                navbar: false // 是否显示导航栏
                            });

                            // 打开 Viewer
                            viewer.show();

                            // 关闭时销毁实例，防止内存泄漏
                            viewer.hide = function () {
                                viewer.destroy();
                                document.body.removeChild(imgContainer);
                            };
                        }

                        // 为图片绑定点击事件
                        $('.image-preview').on('click', function () {
                            var src = $(this).attr('src');
                            showLarge(src);
                        });

                        form.on('submit(save)', function (data) {
                            // 网络请求
                            loadIndex = layer.load(2);
                            $.ajax({
                                type: 'POST',
                                url: "/log/save",
                                data: JSON.stringify(data.field),
                                contentType: "application/json",
                                success: function (res) {
                                    if (res.code === 200) {
                                        parent.layer.msg('保存成功', { icon:1 });
                                        const index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 索引
                                        parent.layer.close(index); // 关闭弹窗
                                        parent.layui.table.reload('tableList');// 关闭弹窗

                                    } else {
                                        layer.msg('保存失败: ' + res.msg, {icon: 2});
                                    }
                                }, error: function () {
                                    layer.close(loadIndex);
                                    layer.msg('网络错误，请稍后再试', {icon: 2});
                                }
                            });
                            return false; // Prevent form submission
                        });
                        // 修改下载按钮点击事件，直接跳转下载链接
                        $('#downloadBtn').on('click', function () {
                            var id = $("input[name='id']").val();
                            window.location.href = "/log/downloadFiles?id=" + id;
                        });
                    });
                });

                document.addEventListener("DOMContentLoaded", function () {
                    document.querySelectorAll(".file-name").forEach(link => {
                        let fileName = link.getAttribute("data-filename");

                        // 取出最后的文件名部分（去掉路径）
                        fileName = fileName.substring(fileName.lastIndexOf('/') + 1);

                        // 去掉 UUID（格式：xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx_）
                        fileName = fileName.replace(/^[\da-f]{8}-(?:[\da-f]{4}-){3}[\da-f]{12}_/, '');

                        // 去掉时间戳（格式：-数字.扩展名，确保保留扩展名）
                        fileName = fileName.replace(/-\d+\./, '.');

                        // 设置修改后的文件名
                        link.textContent = fileName;
                    });
                });
            </script>
        </div>
    </div>
</div>

<footer>
    <!-- JS部分 -->
    <script type="text/javascript">
        var url = window.location.pathname.substring(1);
        var item = url.split("/");
        var jsUrl = "/static/module/javaweb_" + item[0] + ".js";
        document.write("<script src='" + jsUrl + "'><\/script>");
    </script>
</footer>
</body>
</html>
